<template>
  <el-row>
    <el-col :span="6" class="exhart">
      <h4>库存使用情况</h4>
      <div ref="quan" style="width:426px;height:280px;">
        1
      </div>
    </el-col>
    <el-col :span="17" class="echart">
      <h4>库区使用情况</h4>
      <div ref="bing" style="width:426px;height:280px;">2</div>
    </el-col>
  </el-row>
</template>

<script>
import { stockUseStatus, areaUseStatus } from '@/api'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      useStatus: [],
      areaStatus: [],
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            color: ['#e4dbda', '#ffaa00'],
            name: '库存使用情况',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  },
  async created() {
    const { data } = await stockUseStatus()
    // console.log(data)
    this.useStatus = data
    this.echartInit()
    const res = await areaUseStatus()
    console.log(res)
  },
  methods: {
    async echartInit() {
      this.option.series[0].data = this.useStatus
      const myFcharts = echarts.init(this.$refs.quan)
      myFcharts.setOption(this.option)
    }

  }
}
</script>

<style lang="scss" scoped>
.exhart,.echart{

  background-color: #fff;
}
.exhart{
  margin-right: 20px;
}
</style>
